<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
			<u-form-item label="名称" prop="ingredientsInfo.name" borderBottom ref="itemname">
				<u--input v-model="model1.ingredientsInfo.name" border="none"></u--input>
			</u-form-item>
			<u-form-item label="数量" prop="ingredientsInfo.quantity" borderBottom ref="itemquantity">
				<u--input v-model="model1.ingredientsInfo.quantity" border="none"></u--input>
			</u-form-item>
			<u-form-item label="单位" prop="ingredientsInfo.unit" borderBottom ref="itemunit">
				<u--input v-model="model1.ingredientsInfo.unit" border="none"></u--input>
			</u-form-item>
			<!-- <u-form-item label="性别" prop="ingredientsInfo.sex" borderBottom @click="showSex = true" ref="item1">
				<u--input v-model="model1.ingredientsInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item> -->
		</u--form>
		<!-- <u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</u-action-sheet> -->
		<u-button type="primary" text="确定" @click="submit"></u-button>
	</view>
</template>

<script>
	import {
		saveIngredient
	} from '@/api/ingredients.js'
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					ingredientsInfo: {
						name: 'uView UI',
						quantity: 1,
						unit: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'ingredientsInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'ingredientsInfo.unit': {
						type: 'string',
						// max: 1,
						required: true,
						message: '请填写单位',
						trigger: ['blur', 'change']
					},
					'ingredientsInfo.quantity': {
						type: 'number',
						required: true,
						message: '请填写数量',
						trigger: ['blur', 'change']
					}
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			sexSelect(e) {
				this.model1.ingredientsInfo.sex = e.name
				this.$refs.uForm.validateField('ingredientsInfo.sex')
			},
			submit() {
				// let info = this.model1.ingredientsInfo;
				// console.log(info);
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')

					saveIngredient(this.model1.ingredientsInfo);
				}).catch(errors => {
					uni.$u.toast(`校验失败,${errors}`)
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>